import api from './api.js';
import Cart from './cart.js';
import Home from './home.js';
import List from './list.js';

export default {
  components: {
    Home,
    List,
    Cart
  },
  template: `
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="header-content">
                    <div class="logo">
                        <img src="./img/logo.png" class="logo-img" alt="logo"/>
                        <div class="logo-text">东软饭店</div>
                    </div>
                    <div class="userInfo">
                        <el-dropdown v-if="isLoggedIn">
                          <span class="el-dropdown-link">{{ userInfo.username }}</span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="viewProfile">查看个人信息</el-dropdown-item>
                              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                        <div v-else>
                          <el-button type="info" round class="custom-button" @click="openDialog">登录</el-button>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">精品餐谱</el-menu-item>
                    <el-menu-item index="3">我的点餐</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <component :is="selectedMenu" :is-logged-in="isLoggedIn" :user-info="userInfo"></component>
                </el-main>
            </el-container>
        </el-container>
        <el-dialog v-model="dialogFormVisible" title="登录/注册" width="500" class="dialog">
          <el-form :model="form" class="dialog-form">
            <el-form-item label="账号" :label-width="formLabelWidth" :required="true">
              <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" :required="true">
              <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="handleLogin">登录</el-button>
              <el-button type="primary" @click="handleRegister">注册</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
  `,
  data() {
    return {
      isLoggedIn: false,
      dialogFormVisible: false,
      selectedMenu: Home,
      form: {
        username: '',
        password: ''
      },
      userInfo: {
        id: 0,
        username: 'anonymous',
        password: ''
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          this.selectedMenu = Home;
          break;
        case '2':
          this.selectedMenu = List;
          break;
        case '3':
          this.selectedMenu = Cart;
          break;
      }
    },
    handleLogin() {
      const user = {
        username: this.form.username,
        password: this.form.password
      };

      if (!user.username || !user.password) {
        this.$message.error('用户名和密码不能为空');
        return;
      }

      api.loginUser(user)
        .then(response => {
          user.id = response.data.data.id;
          this.userInfo = user;
          this.isLoggedIn = true;
          this.dialogFormVisible = false;
        })
        .catch(error => {
          console.error(error);
        });
    },
    handleRegister() {
      const user = {
        username: this.form.username,
        password: this.form.password
      };

      if (!user.username || !user.password) {
        this.$message.error('用户名和密码不能为空');
        return;
      }

      api.registerUser(user)
        .then(response => {
          user.id = response.data.id;
          this.userInfo = user;
          this.isLoggedIn = true;
          this.dialogFormVisible = false;
        })
        .catch(error => {
          console.error(error);
        });
    },
    openDialog() {
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    logout() {
      this.isLoggedIn = false;
      this.userInfo = {
        id: 0,
        username: 'anonymous',
        password: ''
      };
    },
    viewProfile() {
      this.$alert(`
        <p>用户名: ${this.userInfo.username}</p>
        <p>用户ID: ${this.userInfo.id}</p>
      `, '个人信息', {
        dangerouslyUseHTMLString: true,
      });
    }
  }
};
